<template>
  <div class="maxbox">
    <div id="appp">
      <vue-particles
          color="#dedede"
          :particleOpacity="0.7"
          :particlesNumber="80"
          shapeType="circle"
          :particleSize="4"
          linesColor="#dedede"
          :linesWidth="1"
          :lineLinked="true"
          :lineOpacity="0.4"
          :linesDistance="150"
          :moveSpeed="3"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="true"
          clickMode="push"
          class="beijing"
      ></vue-particles>
    </div>

    <el-form
        :model="loginForm"
        status-icon
        :rules="rules"
        ref="loginForm"
        label-width="100px"
        class="demo-ruleForm"
    >
      <h1 class="title">
        <i class="el-icon-menu"></i>
        欢迎来到vhr
      </h1>
      <el-form-item label="用户名" prop="username">
        <el-input type="text" v-model="loginForm.username"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="loginForm.checkPass" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('loginForm')">提交</el-button>
        <el-button @click="resetForm('loginForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
import qs from 'qs';
export default {
  name:"Login",
  data() {
// 包含特殊字符哦
    const checkSpecificKey = function(str) {
// 正则表达
      var specialKey =
          "[`~!#$^&*()=|{}':;',\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'";
      for (var i = 0; i < str.length; i++) {
        if (specialKey.indexOf(str.substr(i, 1)) != -1) {
//specialKey是否含有某一个你输入的特殊字符
          return false; //如果你输入的账号中有特殊字符 直接退出来哦
        }
      }
      return true;
    };

// 验证密码的函数
    const pass = (rule, value, callback) => {
      if (value === "") {
//为空的验证
        callback(new Error("请输入密码"));
      } else if (value.length < 3 || value.length > 6) {
//这是密码长度的验证
        callback(new Error("密码长度 3 - 6 位"));
      } else if (!checkSpecificKey(value)) {
//
        callback(new Error("密码不能包含特殊字符"));
      } else {
        if (this.loginForm.checkPass !== "") {
// 如果确认密码不为空
          this.$refs.loginForm.validateField("checkPass"); // 调用确认密码的验证（一致性验证）
        }
// 成功的回调
        callback();
      }
    };

// 确认密码的验证函数
    const checkPass = (rule, value, callback) => {
// rule是传入的验证规则 value是用户输入的值 callback是一个回调函数
      if (value === "") {
// 如果等于空
        console.log(value);
        callback(new Error("请再次输入密码11")); // 输出提示
      } else if (value !== this.loginForm.password) {
// 如果确认密码 和 密码不同
        callback(new Error("两次输入密码不一致1"));
      }
// 如果直接调用 不传入任何错误信息 就是成功 绿色的勾勾
      callback();
    };

    return {
// 登录表单的数据
      loginForm: {
        username: "",
        password: "",
        checkPass: ""
      },
// 验证的规则（一份数据）
      rules: {
// 验证用户名
        username: [
// 非空验证
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 5, message: "账号长度在 3 - 5 位", trigger: "blur" }
        ],
// 验证密码
        password: [
// 非空验证
          { required: true, validator: pass, trigger: "blur" }
        ],
// 验证确认密码
        checkPass: [
// 自定义验证函数
          { required: true, validator: checkPass, trigger: "blur" }
        ]

        /*
        验证规则字段说明：
        { required: true/false 必填, message: "错误的提示信息", trigger: "触发验证的方式" }
        { min: 最小长度, max: 最大长度, message: "错误的提示信息", trigger: "触发验证的方式" }
        { validator： 自定义验证规则函数名， trigger: 'blur'}
        */
      }
    };
  },


  methods: {
// 点击登录按钮 触发这个函数
    submitForm(formName) {
// 获取表单组件 调用验证方法
      this.$refs[formName].validate(valid => {
// 如果所有验证通过 valid就是true
        if (valid) {
          alert("前端验证通过 可以提交给后端！");
// 后续就可以把收集的账号和密码 一起发送给后端 验证用户名和密码的正确性。
// 收集账号和密码
          let params = {
            username: this.loginForm.username,
            password: this.loginForm.password
          };
          console.log(params);
          let kv =qs.stringify(params);
          console.log(kv);
          this.$http.post('http://localhost:8989/login',kv).then(res=>{
            if (res.data===200){
              alert("欢迎登录,状态码："+res.data);
              this.$router.push('personnel');
            }else { alert(res.data);}
          })



// 发送请求 把参数发给后端（把用户名和密码发给后端 验证是否正确）
// console.log(params)
// 直接跳转到后端主页
// this.$router.push("/");
        } else {
// 否则就是false
          alert("前端验证失败 不能提交给后端！");
          return false;
        }
      });
    },
// 点击重置按钮 触发这个函数
    resetForm(formName) {
// this.$refs.loginForm.resetFields() 获取整个表单组件 调用重置方法
      this.$refs[formName].resetFields();
    }
  }

};
</script>
<style lang="less" scoped >
// 这一个部分是插件的哦
.beijing {
  background-image: url("../assets/image/bg.png");
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#app {
  //最大的容器
  width: 100%;
  height: 100%;
  margin: auto;
  text-align: center;
  .el-form {
    color: #00ff22;
    filter:alpha(Opacity=60);
    -moz-opacity:0.8;opacity: 0.8;
    //第二大的容器
    // 垂直 水平 居中
    width: 450px;
    height: 350px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    .el-form-item {
      //这是那三行的错误哦
      margin-top: 28px; //让变淡之间是有间距的哦
      .el-form-item__label {
        color: #ffffff;
      }
    }
    .title {
      //标题
      color: lightseagreen;
      padding-left: 40px; //让变体居中 这里使用的是padding-left
    }
  }
}
</style>